<template>
  <div class="wrap">
    <div class="search-row">
      <el-input class="search-word" placeholder="请输入关键字" v-model="searchWord">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button class="download" type="primary" @click="download">导出</el-button>
      <div class="source-option">
        <span class="desc">数据来源：</span>
        <el-select v-model="source.selected" @change="changeSource">
          <el-option
            v-for="item of source.options"
            :key="item.source"
            :label="item.sourceDesc"
            :value="item.source"
          ></el-option>
        </el-select>
        <div class="source-date-option" v-show="source.selected == 2">
          <span class="desc">首贷日期：</span>
          <el-select v-model="firstLoanDate.selected" @change="changeDate">
            <el-option
              v-for="item of firstLoanDate.options"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-button type="danger" class="delete-batch" @click="deleteBatch">删除筛选的数据</el-button>
        </div>
      </div>
    </div>
    <el-table :data="baseList" stripe style="width: 100%;" :max-height="tableMaxHeight">
      <el-table-column prop="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="firmName" label="企业名称" width="400"></el-table-column>
      <el-table-column prop="firstLoanDate" label="首贷日期" width="200"></el-table-column>
      <el-table-column prop="bankName" label="金融机构名称" width="120"></el-table-column>
      <el-table-column prop="source" label="数据来源" width="120"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteBaseRow(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPage"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>
<script>
import {
  Table,
  TableColumn,
  Pagination,
  Input,
  Button,
  Select,
  Option
} from "element-ui";
import {
  getFirstLoanBaseList,
  deleteFirstLoanBaseItem,
  getFirstLoanBaseSource,
  getFirstLoanBaseSourceDateList,
  deleteFirstLoanBaseByReportDate,
  downloadFirstLoanBase
} from "@/api/first-loan.js";

import { downloadFile } from "@/utils/download.js";
export default {
  name: "first-loan-base",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      totalPage: 0,
      pageSize: 10,
      pageNum: 1,
      searchWord: null,
      baseList: [],
      source: {
        selected: null,
        options: []
      },
      firstLoanDate: {
        selected: null,
        options: []
      }
    };
  },
  computed: {
    tableMaxHeight() {
      let outterHeight = 380;
      this.showUploader ? null : (outterHeight -= 180);

      return window.innerHeight - outterHeight;
    }
  },
  mounted() {
    this.refreshList();
    getFirstLoanBaseSource()
      .then(res => {
        this.source.options.push({ source: -1, sourceDesc: "全部" });
        res.forEach(item => this.source.options.push(item));
        this.source.selected = -1;
      })
      .catch(errMsg => errMsg.msg);
  },
  watch: {
    searchWord() {
      this.pageNum = 1;
      this.refreshList();
    }
  },
  methods: {
    refreshList() {
      getFirstLoanBaseList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        searchWord: this.searchWord,
        source: this.source.selected,
        reportDate: this.firstLoanDate.selected
      })
        .then(res => {
          this.baseList = res.list;
          this.totalPage = res.total;
          this.baseList.forEach((item, index) => (item.index = index + 1));
        })
        .catch(errMsg => this.$alert(errMsg));
    },
    refreshDate() {
      getFirstLoanBaseSourceDateList()
        .then(res => {
          this.firstLoanDate.selected = "全部";
          this.firstLoanDate.options = [];
          this.firstLoanDate.options.push("全部");
          res.forEach(item => this.firstLoanDate.options.push(item));
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },

    pageChange(currentPage) {
      this.pageNum = currentPage;
      this.refreshList();
    },
    deleteBaseRow(index, row) {
      this.$confirm("此操作将永久删除数据库条目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteFirstLoanBaseItem(row.id)
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    changeSource(source) {
      this.refreshList();
      if (source == 2) {
        //选择温州辖内上报的机构后，获取日期
        this.refreshDate();
      }
    },
    changeDate() {
      this.refreshList();
    },
    deleteBatch() {
      this.$confirm("此操作将永久删除数据库中相应的企业, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteFirstLoanBaseByReportDate({
            searchWord: this.searchWord,
            source: this.source.selected,
            reportDate: this.firstLoanDate.selected
          })
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    download() {
      let downloading = this.$loading({
        fullscreen: true,
        text: "正在下载首贷户数据库"
      });
      downloadFirstLoanBase({
        searchWord: this.searchWord,
        source: this.source.selected,
        reportDate: this.firstLoanDate.selected
      })
        .then(res => {
          downloadFile(res, window, this.$alert);
          downloading.close();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  padding-left: 5px;

  .search-row {
    .search-word {
      width: 350px;
    }

    .download {
      margin-left: 5px;
    }

    .source-option {
      margin-top: 5px;

      .desc {
        display: inline-block;
        background-color: #ccc;
        border-radius: 5px;
        cursor: default;
        margin-right: 5px;
      }

      .source-date-option {
        display: inline-block;
        margin-left: 5px;
      }

      .delete-batch {
        margin-left: 5px;
      }
    }
  }
}
</style>